<script>
import Address from '@/components/Address/Address.vue';
import UserCard from '@/components/UserCard/UserCard.vue';
import { identity, USER_IDENTITIES } from '@/util/identity.js';
import { refreshTabBar } from '@/util/tabbar.js';
import MyTabbar from '@/components/MyTabbar/MyTabbar.vue';

export default {
	components: {
		UserCard,
		Address,
		MyTabbar
	},
	props: {},
	data() {
		return {
			userInfo: {
				avatar: "",
				nickname: "",
				privilege: 0,
				identity_name: ""
			},
			loading: true,
			isUser: true
		};
	},

	methods: {
		// removed unused entries per requirement
		gotoUserInfo() {
			uni.navigateTo({
				url: '/sub_pages/pages/userinfo/userinfo?showMode=view',
			});
		},
		onSwitchIdentity() {
			uni.navigateTo({ url: '/sub_pages/pages/identity_switch/identity_switch' });
		},

		async loadUserInfo() {
			this.loading = true;
			try {
				const info = await this.$requests.getUserInfo({ showLoading: false });
				if (info) {
					const currentIdentity = identity.getIdentity();
					this.userInfo = {
						...info,
						identity_name: identity.IDENTITY_NAMES[currentIdentity] || identity.IDENTITY_NAMES[USER_IDENTITIES.USER]
					};
				}
			} catch (e) {
				console.error("Fail to load user info", e);
			} finally {
				this.loading = false;
			}
		},
		goToConsultList() {
			console.log("goToConsultList");
			uni.navigateTo({
				url: '/sub_pages/pages/user_consult_list/user_consult_list'
			});
		},

	},

	async onShow() {
		await this.loadUserInfo();
		refreshTabBar();
		this.isUser = identity.isUser();
	},
};
</script>
<template>
	<view class="flex-col justify-start page">
		<view class="flex-col group_1">
			<user-card :userInfo="userInfo" :loading="loading" @click="gotoUserInfo"></user-card>

			<!-- 咨询入口（仅用户身份显示） -->
			<view v-if="isUser" class="consult-section mt-12">
				<view class="consult-grid">
					<view class="consult-item" @click="goToConsultList">
						<image class="consult-icon" src="/static/icon/advice.png" />
						<text class="consult-text">专家咨询</text>
					</view>
					<view class="consult-item disabled">
						<image class="consult-icon" src="/static/icon/advice.png" />
						<text class="consult-text">我的报告</text>
					</view>
				</view>
			</view>
			<view class="flex-row items-center section_4 mt-12">
				<image class="image_8" src="/static/icon/gear.svg" />
				<text class="font_2 text_7 ml-15">设置</text>
			</view>

			<!-- 帮助 / 关于我们 / 意见反馈 -->
			<view class="flex-col section_5 mt-12">
				<view class="flex-row items-center group_2">
					<image class="image_8" src="/static/icon/help.svg" />
					<text class="font_2 ml-15">帮助</text>
				</view>
				<view class="flex-row items-center group_3 mt-2">
					<image class="image_8" src="/static/icon/about.svg" />
					<text class="font_2 text_9 ml-14">关于我们</text>
				</view>
				<view class="flex-row items-center group_5 mt-2">
					<image class="image_8" src="/static/icon/comment.svg" />
					<text class="font_2 text_10 ml-14">意见反馈</text>
				</view>
			</view>

			<!-- 切换身份按钮（底部，仅文字，背景透明） -->
			<view class="switch-identity mt-12" @click="onSwitchIdentity">
				<text class="switch-text">切换身份</text>
			</view>
		</view>
		<my-tabbar />
	</view>
</template>


<style scoped lang="css">
.ml-15 {
	margin-left: 30rpx;
}

.page {
	background-color: #f5f5f5;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	padding-bottom: 150rpx;
}

.group_1 {
	padding: 32rpx 34rpx 0 36rpx;
}

.section_4 {
	padding: 24rpx 40rpx;
	background-color: #ffffff;
	border-radius: 24rpx;
}

.image_8 {
	width: 48rpx;
	height: 48rpx;
}

.section_5 {
	padding: 6rpx 40rpx 7rpx;
	background-color: #ffffff;
	border-radius: 24rpx;
}

.switch-identity {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0;
	background-color: transparent;
}

.switch-text {
	font-size: 28rpx;
	color: #666666;
	margin-right: 12rpx;
}

.group_2 {
	padding: 18rpx 0 4rpx;
}

.font_2 {
	font-size: 24rpx;
	font-family: Microsoft YaHei UI;
	line-height: 23.18rpx;
	color: #000000;
}

.text_12 {
	line-height: 23.22rpx;
}

.group_3 {
	padding: 14rpx 0 8rpx;
	border-top: solid 2rpx #f5f5f5;
	border-bottom: solid 2rpx #f5f5f5;
}

.text_5 {
	line-height: 23.46rpx;
}

.group_4 {
	padding: 6.9rpx 3.32rpx 19.1rpx;
}

.image_9 {
	width: 44rpx;
	height: 44rpx;
}

.text_6 {
	line-height: 23.32rpx;
}

.text_7 {
	line-height: 22.5rpx;
}

.text_9 {
	line-height: 23.14rpx;
}

.group_5 {
	padding: 5rpx 0 17rpx;
}

.text_10 {
	line-height: 23.54rpx;
}

/* 咨询入口样式 */
.consult-section {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
}

.consult-grid {
	display: flex;
	gap: 30rpx;
}

.consult-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30rpx 20rpx;
	background-color: #f8f9fa;
	border-radius: 12rpx;
	transition: all 0.3s;
}

.consult-item:not(.disabled):active {
	background-color: #e9ecef;
	transform: scale(0.98);
}

.consult-item.disabled {
	opacity: 0.5;
}

.consult-icon {
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 16rpx;
}

.consult-text {
	font-size: 26rpx;
	color: #333;
	text-align: center;
}
</style>

<style>
page {
	background-color: #f5f5f5;
}
</style>